<template>
	<div class="wrapper">
		<img src="@/components/img/duigou.png" alt="对勾" style="width: 80px;margin: 56px auto 20px;"/>
		<div class="head-text" style="font-size: 28px;margin: 2px auto;">订单创建成功</div>
		<div  style="margin: 50px 360px;">
			<div class="main-text" v-if="isShow">
				<span class="text">订单号：</span> {{ order.orderId }}</div>
			<div class="main-text" v-if="isShow">
				<span class="text">订单总金额：</span> {{ order.totalAmount }}</div>
			<div class="main-text">
				<span class="text">订单状态：</span>
			<el-tag type="primary" plain size="small">待支付</el-tag>
			</div>
			<div class="main-text" v-if="isShow">
				<span class="text">订单创建时间：</span> {{ order.createTime }}</div>
		</div>
		<div class="btns" >
			<el-button @click="goOrders">返回订单</el-button>
			<el-button type="primary" @click="goToPay">立即支付</el-button>
		</div>

	</div>

</template>

<script setup>
import { ref } from 'vue'
import { get } from '@/plugins/axios';
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
let order = ref()
let isShow = ref(false)
const goOrders = ()=>{
    router.push('/orders')
}
const goToPay =()=>{
    router.push({
        path: '/paid-method',
        query: { id: route.query.id }
    })
}

getById()
function getById() {
    get('/orders/getById', { orderId: route.query.id }, content => {
        order.value = content
        isShow.value = true
    })
}
</script>

<style lang="scss" scoped>
	.wrapper{
		display: flex;
		flex-direction: column;
		.btns{
			display: flex;
			margin-left: 620px;
		}
		.el-button:first-child {
		  flex-grow: 0.08;
		}
    .el-button:first-child:hover {
      color: #e39029;
      background-color: #fcefe2;
      border: #f8961b;
    }
		.el-button:last-child {
		  flex-grow: 0.08;
      background-color: #f59e34;
      border: #b0690f;
		}
		.text{
			font-size: 18px;
			font-weight: 580;
		}
		.main-text{
			margin-bottom: 18px;
		}
	}
</style>